<template>
  <kPage
    ref="kPageRef"
    :formConfig="formConfig"
    :columns="columns"
    :api="listApi"
    :exportConfig="{ api: exportApi }"
  />
</template>
<script lang="tsx" setup>
import { ref } from "vue";
import kPage from "@/components/kPage/index.vue";

import { listApi, exportApi } from "@/api/toolfix/record";

const formConfig = [
  {
    label: "维护时间",
    valueType: "date-picker",
    fieldProps: {
      type: "daterange",
      valueFormat: "YYYY-MM-DD"
    },
    prop: "time"
  },
  {
    label: "查询",
    prop: "searchValue",
    fieldProps: { placeholder: "名称/编号/型号" }
  }
];

const columns = [
  {
    label: "物品照片",
    prop: "toolPicUrl",
    cellRenderer: ({ row }) => {
      return (
        <el-image
          src={row.toolPicUrl}
          width={50}
          preview-src-list={[row.toolPicUrl]}
          preview-teleported={true}
        />
      );
    }
  },
  { label: "物品编号", prop: "toolCode" },
  { label: "物品名称", prop: "toolName" },

  { label: "物品型号", prop: "toolModelName" },
  { label: "标签编码", prop: "toolLabelCode" },
  { label: "工具室", prop: "warehouseName" },
  { label: "存放位置", prop: "toolStorageLocation" },
  { label: "发起时间", prop: "maintenanceInitiationTime" },
  { label: "维护用户", prop: "userNickName" },
  { label: "维护时间", prop: "maintenanceTime" }
];
</script>
